<template>
	<div>
		<span>请选择落地页创建方式：</span>
		<el-radio v-model="radio" label="1" border size="medium">模板创建</el-radio>
		<el-radio v-model="radio" label="2" border size="medium">自定义创建</el-radio>
		<el-form ref="form" :model="form" label-width="120px">
			<el-row>
				<el-col :span="9">
					<el-form-item label="渠道码:">
						<el-input v-model="form.channelCode" style="width: 300px;"></el-input>
					</el-form-item>
					<el-form-item label="落地页码:">
						<el-input v-model="form.landinCode" style="width: 300px;"></el-input>
					</el-form-item>
					<el-form-item label="落地页名称:">
						<el-input v-model="form.name" style="width: 300px;"></el-input>
					</el-form-item>
					<el-form-item label="微信号:">
						<el-input v-model="form.vxNumber" style="width: 300px;"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="埋码:">
						<el-input type="textarea" v-model="form.buriedCode" :rows="10"></el-input>
					</el-form-item>
				</el-col>
			</el-row>
			<div id="choiceTemplete" v-if="radio == 1">
				<div class="templeteTitle">
					<span>正式版模板：</span>
				</div>
				<div style="margin-left: 40px" class="templeteDiv">
					<el-radio-group v-model="form.formal">
						<el-radio :label="item" v-for="item in templete" :key="item" style="display:block;margin-top:15px;margin-bottom: 15px;"></el-radio>
					</el-radio-group>
				</div>
				<div class="templeteTitle">
					<span>审核版模板：</span>
				</div>
				<div style="margin-left: 40px" class="templeteDiv">
					<el-radio-group v-model="form.examine">
						<el-radio :label="item" v-for="item in templete" :key="item" style="display:block;margin-top:15px;margin-bottom: 15px;"></el-radio>
					</el-radio-group>
				</div>
			</div>
			<el-form-item>
				<el-button type="primary" @click="createLandin">立即创建</el-button>
				<el-button @click="clear">清空</el-button>
			</el-form-item>
		</el-form>
		<div style="height: 30px;"></div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				radio: '1',
				form: {
					channelCode: 'gd01',
					landinCode: '',
					formal: '',
					examine: '',
					name: '',
					vxNumber: '',
					buriedCode: ''
				},
				templete: []
			};
		},
		methods: {
			// 获取落地页模板
			getTemplateList() {
				this.$api.getTemplateList("", (res) => {
					if (res.data.rc == this.$util.RC.SUCCESS) {
						this.templete = this.$util.tryParseJson(res.data.c)
					}
				})
			},
			// 创建落地页
			createLandin() {
				// 模板创建
				if (this.radio == 1) {
					// 创建正式版落地页
					if (this.form.formal != undefined && this.form.formal != null && this.form.formal != "") {
						let cnt = {
							channelCode: this.form.channelCode,
							landinCode: this.form.landinCode,
							ver: 1,
							templateName: this.form.formal,
							name: this.form.name,
							buriedCode: this.form.buriedCode,
							vxNumber: this.form.vxNumber
						}
						this.createFormal(cnt)
					}
					// 创建审核版落地页
					if (this.form.examine != undefined && this.form.examine != null && this.form.examine != "") {
						let cnt = {
							channelCode: this.form.channelCode,
							landinCode: this.form.landinCode,
							ver: 2,
							templateName: this.form.examine,
							name: this.form.name,
							buriedCode: this.form.buriedCode,
							vxNumber: this.form.vxNumber
						}
						this.createExamine(cnt)
					}
				} else {
					// 自定义创建
					let cnt1 = {
						channelCode: this.form.channelCode,
						landinCode: this.form.landinCode,
						ver: 1,
						name: this.form.name,
						buriedCode: this.form.buriedCode,
						vxNumber: this.form.vxNumber
					}
					this.createFormal(cnt1)
					let cnt2 = {
						channelCode: this.form.channelCode,
						landinCode: this.form.landinCode,
						ver: 2,
						name: this.form.name,
						buriedCode: this.form.buriedCode,
						vxNumber: this.form.vxNumber
					}
					this.createExamine(cnt2)
				}
			},
			// 创建正式版
			createFormal(cnt) {
				this.$api.createLandin(cnt, (res) => {
					if (res.data.rc == this.$util.RC.SUCCESS) {
						this.$message({
							type: 'success',
							message: '正式版落地页创建成功!'
						});
						this.clear()
					} else {
						this.$message.error('创建失败，请填入落地页基本信息!');
					}
				})
			},
			// 创建审核版
			createExamine(cnt) {
				this.$api.createLandin(cnt, (res) => {
					if (res.data.rc == this.$util.RC.SUCCESS) {
						this.$message({
							type: 'success',
							message: '审核版落地页创建成功!'
						});
						this.clear()
					} else {
						this.$message.error('创建失败，请填入落地页基本信息!');
					}
				})
			},
			// 清空表单
			clear() {
				this.form.channelCode = 'gd01'
				this.form.landinCode = ''
				this.form.formal = ''
				this.form.examine = ''
				this.form.name = ''
				this.form.buriedCode = ''
				this.form.vxNumber = ''
			}
		},
		mounted() {
			this.getTemplateList()
		}
	}
</script>

<style>
	.templeteDiv {
		border: 1px solid black;
		width: 270px;
		height: 352px;
		overflow: auto;
		padding-left: 40px;
	}

	#choiceTemplete {
		display: flex;
	}

	.templeteTitle {
		margin-left: 50px;
	}

	span {
		font-size: 15px;
	}
</style>
